<template>
    <div class="container">
        <a-anchor :target-offset="targetOffset" :get-container="() => containerRef" :items="nav[props.projectType]"
                  class="doc-nav"></a-anchor>
        <a-back-top :target="() => containerRef" :visibilityHeight="400" class="back-top"/>
    </div>
</template>

<script setup lang="ts">
import {PropType, inject} from "vue";

const containerRef = inject("app-container");
const commonItems = [
    {
        key: '0',
        href: '#title',
        title: '首页'
    },
    {
        key: '1',
        href: '#rule-page',
        title: '填写说明'

    },
    {
        key: '2',
        href: '#info-section',
        title: '基本情况'
    },
    {
        key: '3',
        href: '#intro-section',
        title: '项目简介'
    },
    {
        key: '4',
        href: '#basis-section',
        title: '立项依据'
    },
    {
        key: '5',
        href: '#butget-section',
        title: '经费预算'
    },
    {
        key: '6',
        href: '#guide-teacher-opinion',
        title: '指导教师意见'
    },
    {
        key: '7',
        href: '#corp-teacher-opinion',
        title: '企业导师意见'
    },
    {
        key: '8',
        href: '#reco-expert-opinion',
        title: '推荐专家意见'
    },
    {
        key: '9',
        href: '#college-expert-opinion',
        title: '学院专家组意见'
    },
    {
        key: '10',
        href: '#college-opinion',
        title: '学院意见'
    },
    {
        key: '11',
        href: '#school-expert-opinion',
        title: '学校专家组意见'
    },
    {
        key: '12',
        href: '#leader-opinion',
        title: '领导小组审批意见'
    },
    {
        key: '13',
        href: '#school-opinion',
        title: '学校审批意见'
    }
];
const targetOffset = window.innerHeight / 3;
const nav = {
    "创新训练": commonItems.filter((item) => [0, 1, 2, 3, 4, 5, 6, 9, 11, 12].includes(+item.key)),
    "创业训练": commonItems.filter((item) => [0, 1, 2, 3, 4, 5, 6, 7, 9, 11, 12].includes(+item.key)),
    "创业实践": commonItems.filter((item) => [0, 1, 2, 3, 4, 5, 6, 7, 9, 11, 12].includes(+item.key)),
    "校长基金": commonItems.filter((item) => [0, 1, 2, 3, 4, 5, 6, 9, 11, 12].includes(+item.key)),
    "拔尖贵仪": commonItems.filter((item) => [0, 1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 13].includes(+item.key)),
}
const props = defineProps({
    projectType: {
        type: String as PropType<"创新训练" | "创业训练" | "创业实践" | "校长基金">,
        required: true
    },

});

</script>


<style scoped lang="less">
@import "@/assets/less/xmu-themes.less";

.container {
    display: flex;
    flex-flow: column;
    gap: 20px;
    position: fixed;
    max-width: 180px;
    max-height: 600px;
    overflow: auto;
    top: calc(@nav-header-height + 36px);
    left: calc(50% + 550px);
    right: 24px;

}
.back-top {
    width: 85px;
    height: 40px;
    border-radius: 8px;
    position: static;
    box-shadow: 0 0 0 0;
}

</style>